import Button from "@/component/Button";
import { Dropdown } from "@/component/Dropdown";
import Show from "@/component/Show";
import classNames from "classnames";
import dayjs from "dayjs";
import { IDraftItem } from "../draftsMgr";
import styles from './style.module.less';
import { Space } from "@/pages/Main/Space";
import React from "react";

export interface DraftListItemProps extends React.HTMLAttributes<HTMLLIElement> {
  item: IDraftItem;
  actived?: boolean;
  disabled?: boolean;
  selected?: boolean;
  is_anchor?: boolean;
  on_click_delete?(): void;
}
export function DraftListItem(props: DraftListItemProps) {
  const { item: it, onClick, actived, disabled, selected, is_anchor, on_click_delete, ..._p } = props;
  const title = it.draft_title || '<无标题草稿>';
  const breif = it.draft_breif || '';
  const d = document.createElement('div');
  d.innerHTML = breif
  const _root_class_name = classNames(styles.list_item, {
    [styles.list_item_actived]: actived,
    [styles.list_item_disabled]: disabled,
    [styles.list_item_selected]: selected,
    [styles.list_item_is_anchor]: is_anchor
  })
  return (
    <Dropdown triggers={['contextMenu']} menu={{ items: [{ children: '删除', key: '1' }] }}>
      <li
        key={it.draft_id}
        className={_root_class_name}
        onClick={disabled ? void 0 : onClick}
        {..._p}>
        <div className={styles.list_item_btn}>
          <div className={styles.inner}>
            <div className={it.draft_title ? styles.title : styles.no_title}>
              <div style={{ flex: 1 }}>{title}</div>
            </div>
            <div className={styles.breif}>{d.innerText}</div>
            <Space className={styles.breif} align='left'>
              <Show yes={!!it.article_id} > <span>[A.{it.article_id}]</span></Show>
              <Show yes={!!it.draft_id}> <span>[D.{it.draft_id}]</span></Show>
            </Space>
            <div className={styles.bottom}>
              <div className={styles.status}>
                <Button size='s' kind='icon' onClick={on_click_delete} disabled={disabled}>🗑️</Button>
                <Show yes={!!it.unique_pwd_md5}> <span>[独立密码]</span> </Show>
              </div>
              <div className={styles.modify_time}>
                {dayjs(it.modify_time).format('YYYY-MM-DD HH:mm:ss')}
              </div>
            </div>
          </div>
        </div>
      </li>
    </Dropdown>
  );
}